import React, { Component } from 'react'
import { Route, Switch, Redirect } from 'react-router-dom'
import { connect } from 'react-redux'
import { NavBar } from 'antd-mobile'

import Cookies from 'js-cookie'

import { getUser } from './../../redux/action'
import { getRedirectPath } from '../../utils'

import LaobanInfo from '../laoban-info/laoban-info'
import DashenInfo from '../dashen-info/dashen-info'
import Dashen from '../dashen/dashen'
import Laoban from '../laoban/laoban'
import Message from '../message/message'
import Personal from '../personal/personal'
import NotFound from '../../components/not-found/not-found'
import NavFooter from '../../components/nav-footer/nav-footer'
import { navList } from './../../const/dataList'
class Mian extends Component {
  constructor(props) {
    super(props)
    this.state = {}
  }
  componentDidMount() {
    const userId = Cookies.get('userid')
    const { user } = this.props
    if (userId && !user._id) {
      this.props.getUser()
    }
  }
  navList = navList
  render() {
    const pathname = this.props.location.pathname
    const userid = Cookies.get('userid')
    if (!userid) {
      return <Redirect to="login" />
    }
    const { user } = this.props
    if (!user.id) {
      return null
    } else {
      if (pathname === '/') {
        const path = getRedirectPath(user.type, user.header)
        return <Redirect to={path} />
      }
      if (user.type === 'laoban') {
        this.navList[1].hide = true
      } else {
        this.navList[0].hide = true
      }
    }
    const currentNav = this.navList.find(nav => nav.path === pathname)
    return (
      <div>
        {currentNav ? (
          <NavBar className="stick-top">{currentNav.title} </NavBar>
        ) : null}
        <div style={{ marginTop: '50px', marginBottom: '50px' }}>
          <Switch>
            <Route path="/laobaninfo" component={LaobanInfo} />
            <Route path="/dasheninfo" component={DashenInfo} />
            <Route path="/laoban" component={Laoban} />
            <Route path="/dashen" component={Dashen} />
            <Route path="/message" component={Message} />
            <Route path="/personal" component={Personal} />
            <Route component={NotFound} />
          </Switch>
        </div>
        {currentNav ? (
          <NavFooter
            className="stick-bottom"
            unReadCount={this.props.unReadCount}
            navList={this.navList}
          />
        ) : null}
      </div>
    )
  }
}

export default connect(
  state => ({ user: state.user }),
  { getUser }
)(Mian)
